<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@ taglib prefix="fn" uri="http://java.sun.com/jsp/jstl/functions" %>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <title>layout 后台大布局 - Layui</title>
    <link rel="stylesheet" href="${pageContext.request.contextPath}/static/plugin/layui/css/layui.css">
    <style>
        .ul_label {
            width: 100%;
        }

        .li_label {
            list-style-type: none;
            border: 1px solid green;
            border-radius: 5px;
            width: 100px;
            height: 40px;
            float: left;
            margin: 5px 5px;
            text-align: center;
            line-height: 40px;
        }

        .li_label:hover {
            cursor: pointer;
        }

        .ul_type {
            width: 100%;
        }

        .li_type {
            list-style-type: none;
            border: 1px solid green;
            border-radius: 5px;
            width: 100px;
            height: 40px;
            float: left;
            margin: 5px 5px;
            text-align: center;
            line-height: 40px;
        }

        .li_type:hover {
            cursor: pointer;
        }

        .licolor {
            background-color: #00F7DE;
        }

    </style>
</head>
<body class="layui-layout-body">
<div class="layui-layout layui-layout-admin">

    <jsp:include page="../module/top.jsp"></jsp:include>

    <jsp:include page="../module/left.jsp"></jsp:include>


    <div class="layui-body">
        <div style="padding: 15px;" id="content_div">
            <div class="layui-form" action="" lay-filter="example">
                <input type="hidden" name="id" id="id" value="${not empty blogInfo?blogInfo.id:""}">
                <div class="layui-form-item">
                    <label class="layui-form-label">标题</label>
                    <div class="layui-input-block">
                        <input type="text" id="blogName" name="blogName" autocomplete="off" placeholder="请输入标题"
                               class="layui-input" value="${not empty blogInfo?blogInfo.blogName:""}">
                    </div>
                </div>
                <div class="layui-form-item">
                    <label class="layui-form-label">分类</label>
                    <div class="layui-input-block">
                        <ul class="ul_type">
                            <c:forEach items="${typelist}" var="type">
                                <c:if test="${blogInfo.typeid eq type.id}">
                                    <li class="li_type licolor" data-id="${type.id}" onclick="typeclick(this)">${type.typeName}</li>
                                </c:if>
                                <c:if test="${blogInfo.typeid ne type.id}">
                                    <li class="li_type" data-id="${type.id}" onclick="typeclick(this)">${type.typeName}</li>
                                </c:if>
                            </c:forEach>
                        </ul>
                        <input type="hidden" id="typeid" value="${not empty blogInfo?blogInfo.typeid:""}">
                    </div>
                </div>


                <div class="layui-form-item">
                    <label class="layui-form-label">标签</label>
                    <div class="layui-input-block">
                        <ul class="ul_label">
                            <c:forEach items="${labellist}" var="label">

                                <c:if test="${fn:contains(blogInfo.label,label.labelName)}">
                                    <li class="li_label licolor" data-id="${label.id}" data-name="${label.labelName}" data-flag="1" onclick="labelclick(this)">${label.labelName}</li>
                                </c:if>
                                <c:if test="${!fn:contains(blogInfo.label,label.labelName)}">
                                    <li class="li_label" data-id="${label.id}" data-name="${label.labelName}" data-flag="0" onclick="labelclick(this)">${label.labelName}</li>
                                </c:if>

                            </c:forEach>
                        </ul>
                        <input type="hidden" id="labelstr" value="${not empty blogInfo?blogInfo.label:""}">
                    </div>
                </div>
                <%--文本编辑器--%>
                <div class="layui-form-item">
                    <label class="layui-form-label">博客</label>
                    <div class="layui-input-block">
                        <div id="editor">
                            ${not empty blogInfo?blogInfo.content:""}
                        </div>
                    </div>
                </div>
                <div class="layui-form-item">
                    <div class="layui-input-block">
                        <button class="layui-btn" onclick="save()">保存</button>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <jsp:include page="../module/bottom.jsp"></jsp:include>
</div>
<script src="${pageContext.request.contextPath}/static/js/jquery-2.1.1.min.js"></script>
<script src="${pageContext.request.contextPath}/static/plugin/layui/layui.all.js"></script>
<!-- 注意， 只需要引用 JS，无需引用任何 CSS ！！！-->
<script type="text/javascript" src="${pageContext.request.contextPath}/static/plugin/wangEditor/release/wangEditor.js"></script>

<script type="text/javascript">
    var form = layui.form;
    var layer = layui.layer;
    var upload = layui.upload;

    //监听提交
    function save() {
        //获取id
        var id = $("#id").val();
        //获取标题
        var blogName = $("#blogName").val();
        //获取类型
        var typeid = $("#typeid").val();
        //获取标签
        var labelstr = $("#labelstr").val();
        //获取博客
        var content = editor.txt.html();
        var obj = {"id": id, "blogName": blogName, "typeid": typeid,"label": labelstr,"content": content}
        var jsonstr = JSON.stringify(obj);
        $.ajax({
            url: '${pageContext.request.contextPath}/bloginfo/save_bloginfo',
            type: 'post',
            dataType: 'json',
            data: {'jsonstr': jsonstr},
            async: false,
            success: function (result) {
                if (result.status) {
                    window.location = '${pageContext.request.contextPath}/bloginfo/blog_info_list_vlew.html';
                } else {
                    layer.msg(result.msg)
                }
            },
            error: function () {
                alert("异常！");
            }
        });
    }

    function typeclick(ele) {
        var _ele = $(ele);
        var id = _ele.data("id");
        $("#typeid").val(id);
        $(".li_type").removeClass("licolor");
        _ele.addClass("licolor")
    }

    function labelclick(ele) {
        var _ele = $(ele);
        var name = _ele.data("name");
        var flag = _ele.data("flag");
        if (flag == 0) {//未选中,添加
            _ele.data("flag", 1);
            _ele.addClass("licolor");
        } else {//选中,移除
            _ele.data("flag", 0);
            _ele.removeClass("licolor");
        }
        var list = "";
        $(".li_label").each(function (index, domEle) {
            flag = $(domEle).data("flag");

            if (flag == 1) {
                var val = $(domEle).data("name");
                if (list == "") {
                    list += val;
                } else {
                    list = list + "," + val
                }
            }
        });
        $("#labelstr").val(list);
    }

</script>
<%--文本编辑器--%>
<script type="text/javascript">
    var E = window.wangEditor;
    var editor = new E('#editor')
    editor.customConfig.menus = [
        'head',  // 标题
        'bold',  // 粗体
        'fontSize',  // 字号
        'fontName',  // 字体
        'italic',  // 斜体
        'underline',  // 下划线
        'strikeThrough',  // 删除线
        'foreColor',  // 文字颜色
        'backColor',  // 背景颜色
        'link',  // 插入链接
        'list',  // 列表
        'justify',  // 对齐方式
        'quote',  // 引用
        'emoticon',  // 表情
        'image',  // 插入图片
        'table',  // 表格
        'video',  // 插入视频
        'code',  // 插入代码
        'undo',  // 撤销
        'redo'  // 重复
    ];
    // 配置服务器端地址
    editor.customConfig.uploadImgServer = '/file/wangEditorImgFile';
    editor.customConfig.uploadImgMaxSize = 3 * 1024 * 1024;
    editor.customConfig.uploadFileName = 'file';
    editor.customConfig.uploadImgHooks = {
        before: function (xhr, editor, files) {
            // 图片上传之前触发
            // xhr 是 XMLHttpRequst 对象，editor 是编辑器对象，files 是选择的图片文件

            // 如果返回的结果是 {prevent: true, msg: 'xxxx'} 则表示用户放弃上传
            // return {
            //     prevent: true,
            //     msg: '放弃上传'
            // }
        },
        success: function (xhr, editor, result) {
            // 图片上传并返回结果，图片插入成功之后触发
            // xhr 是 XMLHttpRequst 对象，editor 是编辑器对象，result 是服务器端返回的结果
        },
        fail: function (xhr, editor, result) {
            // 图片上传并返回结果，但图片插入错误时触发
            // xhr 是 XMLHttpRequst 对象，editor 是编辑器对象，result 是服务器端返回的结果
        },
        error: function (xhr, editor) {
            // 图片上传出错时触发
            // xhr 是 XMLHttpRequst 对象，editor 是编辑器对象
            layer.msg("文件上传出错");
        },
        timeout: function (xhr, editor) {
            // 图片上传超时时触发
            // xhr 是 XMLHttpRequst 对象，editor 是编辑器对象
            layer.msg("文件上传超时");
        }
    };
    editor.customConfig.uploadImgShowBase64 = true   // 使用 base64 保存图片
    editor.create();


</script>

</body>
</html>